import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Spin, Select, message, Button, DatePicker } from 'antd';
import { connect } from 'dva';
import router from 'umi/router';
import moment from 'moment';
import Supplier from '../../components/NsSupplier';
import DictCode from '../../components/DictCode';

const FormItem = Form.Item;
const { Option } = Select;
const { MonthPicker } = DatePicker;

@connect(({ loading, batchsendns }) => ({
  loading: loading.models.batchsendns || false,
  batchsendns,
}))
@Form.create()
class BasicForm extends React.Component {
  componentDidMount() {
    // 获取当前角色所在公司对应的平台供应商
    const {
      dispatch,
      batchsendns: { isGoBack = false },
    } = this.props;
    if (!isGoBack) {
      dispatch({
        type: 'batchsendns/updateQuery',
        payload: {
          ordSndrId: undefined,
          custId: undefined,
          custName: undefined,
          incmType: undefined,
          busiYm: undefined,
          wageDate: undefined,
          changeFlag: '2', // 是否变更发放日期
          wageReaSendDate: undefined,
          reaRsn: undefined,
        },
      });
      dispatch({
        type: 'batchsendns/updateModelData',
        payload: {
          supplyList: [],
          custNameList: [],
        },
      });
      // this.getCustomers();
    }
  }

  // 选择签约方
  selectCompany = () => {
    // selectCompany = (value, options) => {
    const { form, dispatch } = this.props;
    form.resetFields(['custId']);
    dispatch({
      type: 'batchsendns/updateQuery',
      payload: { custId: undefined, custName: undefined },
    });
    // this.getCustomers(
    //   (options.props && options.props.options && options.props.options.suppId) || null
    // );
  };

  // 获取客户名称
  getCustomers = value => {
    const { dispatch } = this.props;
    dispatch({
      type: 'batchsendns/updateModelData',
      payload: { custNameList: [] },
    });

    dispatch({
      type: 'batchsendns/customerList',
      payload: { suppId: value || null },
      callback: response => {
        if (response.success && response.data.length) {
          dispatch({
            type: 'batchsendns/updateModelData',
            payload: { custNameList: response.data },
          });
        } else {
          message.warning('该签约方下暂无客户！');
        }
      },
    });
  };

  // 选择客户名称
  selectCustomers = (custId, options) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'batchsendns/updateQuery',
      payload: { custId, custName: options.props.children || '' },
    });
  };

  // 选择变更发放日期
  selectChangeFalg = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'batchsendns/updateQuery',
      payload: { changeFlag: e.target.value },
    });
  };

  // 下一步
  nextStep = () => {
    const {
      form,
      onNext,
      dispatch,
      batchQuery: { wageFalg },
    } = this.props;
    form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        Object.keys(values).forEach(key => {
          const temp = values;
          if (key === 'busiYm') {
            temp[key] = Number(values[key].format('YYYYMM'));
          }
        });
        const batchSendInfo = { ...values, wageFalg };
        dispatch({
          type: 'batchsendns/updateQuery',
          payload: { ...values },
        });
        onNext(batchSendInfo);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      batchQuery,
      batchsendns: { custNameList },
      loading,
    } = this.props;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };
    return (
      <Form style={{ margin: '40px auto 0', maxWidth: 800 }}>
        <Spin tip="Loading..." spinning={loading}>
          <FormItem {...formItemLayout} label="签约方">
            {getFieldDecorator('ordSndrId', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: batchQuery.ordSndrId,
            })(<Supplier getData={this.selectCompany} />)}
          </FormItem>
          {/* <FormItem {...formItemLayout} label="客户名称">
            {getFieldDecorator('custId', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: batchQuery.custId,
            })(
              <Select
                placeholder="请选择"
                onSelect={this.selectCustomers}
                showSearch
                optionFilterProp="children"
              >
                {custNameList.map(item => (
                  <Option key={item.custId} value={item.custId} options={item} title={item.name}>
                    {item.name}
                  </Option>
                ))}
              </Select>
            )}
          </FormItem> */}
          <FormItem {...formItemLayout} label="收入类型">
            {getFieldDecorator('incmType', {
              rules: [{ required: true, message: '请选择' }],
              initialValue: batchQuery.incmType,
            })(<DictCode dictType="WAGE_INCM_TYPE" />)}
          </FormItem>
          <FormItem {...formItemLayout} label="收入年月">
            {getFieldDecorator('busiYm', {
              rules: [{ required: true, message: '请选择' }],
              initialValue:
                batchQuery.busiYm &&
                moment(
                  `${batchQuery.busiYm
                    .toString()
                    .substr(0, 4)}-${batchQuery.busiYm.toString().substr(4, 5)}`
                ),
            })(<MonthPicker placeholder="请选择" style={{ width: '100%' }} format="YYYY-MM" />)}
          </FormItem>
          <div style={{ marginTop: 100, textAlign: 'center' }}>
            <Button
              onClick={() => router.push('/salarymanage/salarysend/index?activeKey=4')}
              style={{ marginRight: 8 }}
            >
              返回
            </Button>
            <Button type="primary" onClick={this.nextStep}>
              下一步
            </Button>
          </div>
        </Spin>
      </Form>
    );
  }
}

export default BasicForm;
